// 登录页
import React, { useState, useEffect, useForm } from 'react';
import { Card, Image, Form, Space, Input, Button } from 'antd';

import './index.less';

const LoginSign = (props) => {
  const { history } = props;

  const [form] = Form.useForm();
  const formLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };

  useEffect(() => {}, []);

  // 点击、回车（登录）
  const onFinish = (event) => {
    if (event.keyCode && event.keyCode == 13) {
      form.validateFields().then((val) => {
        submitLogin(val);
      });
    } else {
      submitLogin(event);
    }
  };

  // 登录
  const submitLogin = (val) => {
    localStorage.setItem('token', true);
    history.push(`/base-layout`);
  };

  return (
    <>
      <Card hoverable className="login-card">
        <Form name="login" {...formLayout} form={form} onFinish={onFinish}>
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input.Password onPressEnter={onFinish} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
              <Button type="default">注册</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      <Image
        width="100%"
        style={{ height: '100vh' }}
        preview={false}
        src={`${DEV_URL}:7777/image/juejin/login_background.png`}
      />
    </>
  );
};

export default LoginSign;
